let $image = $('.container img')
const layer = layui.layer

$image.cropper({
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域 (把预览的图片放到哪去)
    preview: '.preview',
})

// 选择文件的按钮点击功能 ==> 模拟点击 文件选择器
$('#btnChooseImage').click(function () {
    $('#file').click()
})

// =============================  给文件域注册change事件 =============================
$('#file').on('change', function () {
    let file = this.files[0]
    // console.log(file);

    // 细节优化：如果没有选择，后续代码不执行并提示用户
    if (!file) {
        return layer.msg('请选择文件')
    }

    let newImgSrc = URL.createObjectURL(file)
    // console.log(newImgSrc);

    $image.cropper('destroy').attr('src', newImgSrc).cropper({
        // 纵横比
        aspectRatio: 1,
        // 指定预览区域 (把预览的图片放到哪去)
        preview: '.preview',
    })
})

// ============================= 上传新头像 =============================
$('#btnCreateAvatar').on('click', function () {
    // 得到裁切的base64字符串
    // 剪裁得到一张图片（canvas图片）
    let base64Str = $image.cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布
        width: 100,
        height: 100,
    })

    // 把图片转成base64格式
    let dataURL = base64Str.toDataURL('image/png') // 把canvas图片转成base64格式的字符串
    console.log(dataURL)

    // 发送ajax请求
    axios
        .post('/my/update/avatar', `avatar=${encodeURIComponent(dataURL)}`)
        .then(({ data: { status, message } }) => {
            // console.log(res)

            if (status !== 0) {
                // 失败
                return layer.msg(message)
            }

            layer.msg(message)
            // 调用父页面index页面的getUserInfo函数 ==> 重新渲染展示头像
            window.parent.getUserInfo()
        })
})
